'use client';

import Image from 'next/image';
import BannerSlider from '@/components/BannerSlider';
import { lora, lato } from '@/components/fonts';
import Button from '@mui/material/Button';
import Diamond from '@mui/icons-material/Diamond';
import ArrowRightAlt from '@mui/icons-material/ArrowRightAlt';
import { styled } from '@mui/material/styles';
import { common } from '@mui/material/colors';
import { useRouter } from 'next/navigation';

const ColorButton = styled(Button)(({ theme }) => ({
  color: theme.palette.getContrastText(common.black),
  // backgroundColor: common.black,
  backgroundImage: 'linear-gradient(179deg, #3D3C40 18%, #1D1C21 100%)',
  '&:hover': {
    backgroundColor: common.black,
    backgroundImage: null,
  },
}));

export default function ScreenOne() {
  const router = useRouter();
  return (
    <>
      <div className="h-[calc(100vh - 14rem)] mx-auto flex max-w-7xl flex-col items-center justify-between bg-white px-4 py-10 lg:flex-row">
        <div className="flex min-h-[490px] flex-col justify-between self-stretch py-18 lg:flex-1">
          <div>
            <h1
              className={`${lato.className} line mb-6 text-6xl leading-15 font-medium text-[#0687FF]`}
            >
              Navigate Uncertainty Deliver Impact
            </h1>
            <p
              className={`${lato.className} font-sans text-[24px] font-normal text-[#68727E]`}
            >
              From Factory to Final Mile—and Back:
              <br /> TMS, MES, and Reverse Flow Redefined
            </p>
          </div>
          <div>
            <ColorButton
              // color={'#000000'}
              size={'medium'}
              variant="contained"
              startIcon={<Diamond />}
              endIcon={<ArrowRightAlt />}
              onClick={() => {
                router.push('/consulting');
              }}
            >
              GET A DEMO
            </ColorButton>
          </div>
        </div>
        <div className="flex">
          {/*<img src={'/banner-main.png'} alt={''} />*/}
          <Image src={'/banner-main.png'} alt={''} width={490} height={490} />
        </div>
      </div>
      <div className="mt-6">
        <BannerSlider />
      </div>
    </>
  );
}
